@tailwind base;
@tailwind components;
@tailwind utilities;
@import "fonts.css";

:root {
  --ifm-font-family-base: 'Hanken Grotesk';
  --meltano-white: #ffffff;
  --meltano-black: #080216;
  --meltano-blue: #3A64FA;
  --meltano-green: #99CE55;
  --meltano-yellow: #FBCC54;
  --meltano-red: #FF5F3C;
  --ifm-color-primary: #311772;
  --docsearch-primary-color: var(--ifm-color-primary);
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-searchbox-background: transparent !important;
  --ifm-code-font-size: 95%;
  --ifm-navbar-background-color: var(--meltano-white);
  --button-text-color: var(--meltano-white);
  --background-color: var(--meltano-white);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --docusaurus-announcement-bar-height: 60px !important;
  --ifm-heading-color: var(--ifm-color-primary);
  --ligth-button-text-color: var(--meltano-black);
  --ifm-link-hover-color: var(--meltano-black);
  --ifm-footer-background-color: var(--meltano-white);
  --ifm-footer-background: linear-gradient(136deg, #EAE5FC 0%, rgba(234, 229, 252, 0.00) 100%);
  --ifm-navbar-link-hover-color: var(--meltano-black);
  --ifm-footer-title-color: var(--ifm-color-primary);
  --ifm-navbar-sidebar-width: 100%;
  --ifm-navbar-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  --ifm-toc-border-color: rgba(0, 0, 0, 0.15) !important;
  --date-background: rgba(49, 23, 114, 0.15);
  --ifm-menu-color-background-active: transparent;
  --markdown-color: rgba(8, 2, 22, 0.75);
  --markdown-h-color: #080216;
  --ifm-breadcrumb-item-background-active: transparent;
  --ifm-breadcrumb-color-active: var(--meltano-blue);
  --ifm-navbar-height: 1rem;
  --ifm-menu-color-background-hover: transparent;
  --ifm-breadcrumb-separator-size-multiplier: 2;
  --ifm-breadcrumb-spacing: 0.7rem;
  --ifm-menu-color-active: var(--meltano-blue);
  --ifm-color-success-contrast-background: rgba(153, 206, 85, 0.40) !important;
  --ifm-color-success-dark: var(--meltano-green) !important;
  --ifm-color-info-contrast-background: rgba(58, 100, 250, 0.40) !important;
  --ifm-color-info-dark: var(--meltano-blue) !important;
  --ifm-color-warning-contrast-background: rgba(251, 204, 84, 0.40) !important;
  --ifm-color-warning-dark: var(--meltano-yellow) !important;
  --ifm-color-danger-contrast-background: rgba(255, 95, 60, 0.40) !important;
  --ifm-color-danger-dark: var(--meltano-red) !important;
  --color-bg: #252a33;
  --color-text: #eee;
  --color-text-subtle: #a2a2a2;
  --ifm-font-size-base: 16px;
  --ifm-code-font-size: 14px;
  --meltano-tabs-background-color: rgba(49, 23, 114, 0.05) !important;
  --ifm-table-stripe-background: var(--date-background);
  --table-border: var(--date-background);
}

@media all and (min-width: 768px) {
  :root {
    --docusaurus-announcement-bar-height: 40px !important;
  }
}

[data-theme='dark'] {
  --meltano-blue: #18C3FA;
  --ifm-color-primary: var(--ifm-color-primary);
  --ifm-navbar-background-color: var(--meltano-black);
  --button-text-color: var(--meltano-black);
  --background-color: var(--meltano-black);
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.2);
  --ifm-heading-color: var(--meltano-white);
  --ligth-button-text-color: var(--meltano-white);
  --ifm-link-hover-color: var(--meltano-white);
  --ifm-footer-background-color: var(--meltano-black);
  --ifm-footer-background: var(--meltano-black);
  --ifm-navbar-link-hover-color: var(--meltano-white);
  --ifm-navbar-shadow: rgba(255, 255, 255, 0.1) 0px 1px 2px 0px;
  --ifm-toc-border-color: rgba(255, 255, 255, 0.15) !important;
  --date-background: rgba(255, 255, 255, 0.05);
  --markdown-color: rgba(255, 255, 255, 0.70);
  --markdown-h-color: #ffffff;
  --ifm-color-success-contrast-background: rgba(153, 206, 85, 0.40) !important;
  --ifm-color-success-dark: var(--meltano-green) !important;
  --ifm-color-info-contrast-background: rgba(58, 100, 250, 0.40) !important;
  --ifm-color-info-dark: var(--meltano-blue) !important;
  --ifm-color-warning-contrast-background: rgba(251, 204, 84, 0.40) !important;
  --ifm-color-warning-dark: var(--meltano-yellow) !important;
  --ifm-color-danger-contrast-background: rgba(255, 95, 60, 0.40) !important;
  --ifm-color-danger-dark: var(--meltano-red) !important;
  --meltano-tabs-background-color: rgba(255, 255, 255, 0.05) !important;
  --table-border: rgba(255, 255, 255, 0.25);
}

/* common */

html {
  scroll-padding-top: 30px;
}

@media all and (min-width: 768px) {
  html {
    scroll-padding-top: 70px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
main,
section {
  background-color: var(--background-color);
}

h1 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 86px;
  line-height: 110%;
  letter-spacing: -0.03em;
}

h2 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 56px;
  line-height: 110%;
  letter-spacing: -0.02em;
  margin: 0;
}

h3 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 110%;
  letter-spacing: -0.015em;
  margin: 0;
}

h4 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 125%;
  letter-spacing: -0.01em;
  margin: 0;
}

h5 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -0.0075em;
  margin: 0;
}

h6 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 130%;
}

.markdown h1 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.03em;
  color: var(--ifm-color-primary);
}

.markdown h2 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 26px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--meltano-h-color);
}

.markdown h3 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--meltano-h-color);
}

.markdown h4 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--meltano-h-color);
}

.markdown h5 {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 110%;
  letter-spacing: -0.02em;
  color: var(--meltano-h-color);
}

.markdown ul {
  list-style-type: disc;
  padding-left: 1rem;
}

.markdown li {
  color: var(--markdown-color);
}

.markdown p {
  color: var(--markdown-color);
}

.markdown a:not(.btn) {
  color: var(--meltano-blue)
}

.markdown pre {
  font-size: var(--ifm-code-font-size);
  border: 1px solid var(--date-background);
  background: var(--meltano-tabs-background-color);
  border-radius: 5px;
}

.markdown code {
  font-size: var(--ifm-code-font-size);
}

.markdown h1 code {
  font-size: 32px;
}

.markdown h2 code {
  font-size: 26px;
}

.markdown h3 code {
  font-size: 24px;
}

.markdown h4 code {
  font-size: 22px;
}

.markdown h5 code {
  font-size: 20px;
}

.markdown .theme-code-block {
  background: none;
}

.markdown table {
  border-radius: 4px;
  border: 1px solid var(--ifm-table-border-color);
  max-width: fit-content;
  font-family: Hanken Grotesk;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.markdown table th,
.markdown thead tr {
  border: none;
  background: none;
  font-weight: 400;
}

.markdown table th,
.markdown table td {
  padding: 1rem;
}

.markdown table thead {
  background-color: var(--table-border);
}

.markdown table thead tr {
  text-align: left;
}

.markdown table th {
  text-align: left;
}

.markdown tbody td {
  border: none;
  border-top: 1px solid var(--ifm-table-border-color);
  border-left: 1px solid var(--ifm-table-border-color);
}

.changelog-content a:not(.btn) .changelog-content a:not(h2) {
  color: var(--ifm-link-hover-color);
  text-decoration: underline !important;
}

.markdown .btn {
  text-align: center;
}

.p1 {
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 170%;
  letter-spacing: -0.005em;
}

.p2 {
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 170%;
}

.p3 {
  font-family: 'Hanken Grotesk', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 170%;
}

a {
  text-decoration: none !important;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

pre {
  font-family: 'IBM Plex Mono', Arial, sans-serif;
  white-space: pre-line;
}

ol {
  margin-bottom: 0;
  font-family: Hanken Grotesk, Arial, sans-serif;
}

.docs-link {
  font-family: 'IBM Plex Mono', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #18c3fa;
  display: flex;
  gap: 10px;
}

.red {
  color: #ff5f3c;
}

.red-bg {
  background-color: #ff5f3c;
}

.pink {
  color: #f963bc;
}

.pink-bg {
  background-color: #f963bc;
}

.yellow {
  color: #fbcc54;
}

.yellow-bg {
  background-color: #fbcc54;
}

.green {
  color: #99ce55;
}

.green-bg {
  background-color: #99ce55;
}

.medium-gray {
  color: #b5b4ba;
}

.medium-gray-bg {
  background-color: #b5b4ba;
}

.blue {
  color: #3a64fa;
}

.blue-bg {
  background-color: #3a64fa;
}

.light-blue {
  color: #18c3fa;
}

.light-blue-bg {
  background-color: #18c3fa;
}

.purple {
  color: #311772;
}

.purple-bg {
  background-color: #311772;
}

.after-dd-blue::after {
  content: ':';
  color: #18c3fa;
}

.before-dash-blue::before {
  content: '- ';
  color: #18c3fa;
}

.ch-space-3 {
  padding-left: 15px;
  display: inline-block;
}

.ch-space-6 {
  padding-left: 30px;
  display: inline-block;
}

.ch-space-9 {
  padding-left: 45px;
  display: inline-block;
}

.ch-space-12 {
  padding-left: 60px;
  display: inline-block;
}

.highlighted {
  background: rgb(255 255 255 / 15%);
  width: 100%;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.btn {
  font-family: 'IBM Plex Mono', Arial, sans-serif;
  padding: 16px 40px;
  font-weight: 500;
  font-size: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
  width: fit-content;
}

.main-btn {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: var(--button-text-color);
  background-color: var(--meltano-blue);
  border-radius: 4.6px;
  display: flex;
  align-items: center;
}

.main-btn:hover {
  color: var(--button-text-color);
  background-color: #311772;
}

[data-theme="dark"] .main-btn:hover {
  color: var(--button-text-color);
  background-color: #0397c7;
}

.alt-blue-btn {
  text-align: center;
  color: #080216;
  background-color: var(--meltano-blue);
  border-radius: 4.6px;
  display: table;
  cursor: pointer;
  border: none;
}

.alt-blue-btn:hover {
  background-color: #0397c7;
}

.arrow-link {
  font-family: 'IBM Plex Mono', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 100%;
  color: #fff;
}

.arrow-link img {
  width: auto !important;
  display: initial !important;
}

.brackets {
  position: relative;
  display: inline-block;
}

.brackets::before {
  content: '/';
  color: #f963bc;
}

.brackets::after {
  content: '/';
  color: #f963bc;
}

.brackets span {
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -100vw;
  display: inline-block;
}

.title-inline .brackets {
  display: inline-block;
}

em {
  position: relative;
  display: inline-block;
  font-style: normal;
}

em::before {
  content: '/';
  color: #f963bc;
}

em::after {
  content: '/';
  color: #f963bc;
}

.single-blog em,
.doc-page em {
  font-style: italic;
}

.single-blog em::before,
.doc-page em::before {
  content: '';
}

.single-blog em::after,
.doc-page em::after {
  content: '';
}

em span {
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  text-indent: -100vw;
  display: inline-block;
  font-style: normal;
}

.title-inline em {
  display: inline-block;
  font-style: normal;
}

@media all and (min-width: 768px) and (max-width: 995px) {
  h1 {
    font-size: 72px;
  }

  h2 {
    font-size: 48px;
  }

  h3 {
    font-size: 36px;
  }

  h4 {
    font-size: 28px;
  }

  h5 {
    font-size: 22px;
  }

  h6 {
    font-size: 18px;
  }

  .p1 {
    font-size: 20px;
  }

  .p2 {
    font-size: 16px;
  }

  .p3 {
    font-size: 14px;
  }
}

@media all and (max-width: 1279px) {
  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 24px;
  }

  h5 {
    font-size: 18px;
  }

  h6 {
    font-size: 16px;
  }

  .p1 {
    font-size: 16px;
  }

  .p2 {
    font-size: 14px;
  }

  .p3 {
    font-size: 12px;
  }

  .ml-margins {
    margin-left: 20px;
    margin-right: 20px;
  }

  .heading {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/*  */

.navbar {
  height: 60px;
  z-index: 200;
}

.navbar-sidebar--show {
  z-index: 202;
}

@media all and (min-width: 768px) {
  .navbar {
    height: 100px;
  }
}

main {
  z-index: 1;
}

.navbar__inner {
  width: 100%;
  padding-right: 3rem;
  padding-left: 3rem;
  margin: 0 auto;
}

.header-github-link {
  padding: 0 0.5rem;
}

.header-github-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
}

[data-theme='dark'] .header-github-link::before {
  background: url("") no-repeat;
}

.header-github-link:hover::before {
  background: url("") no-repeat;
}

[data-theme='dark'] .header-github-link:hover::before {
  background: url("") no-repeat;
}

.header-github-link svg {
  display: none;
}

.header-slack-link {
  padding: 0 0.5rem;
}

.header-slack-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
}

[data-theme='dark'] .header-slack-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
}

.header-slack-link:hover::before {
  background: url("") no-repeat;
}

[data-theme='dark'] .header-slack-link:hover::before {
  background: url("") no-repeat;
}

.header-slack-link svg {
  display: none;
}

.header-get-started-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}


.header-tutorials-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

.header-docs-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

.header-changelog-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

[data-theme='dark'] .header-get-started-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}


[data-theme='dark'] .header-tutorials-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

[data-theme='dark'] .header-docs-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

[data-theme='dark'] .header-changelog-link::before {
  background: url("") no-repeat;
  content: "";
  display: flex;
  height: 24px;
  width: 26px;
  background-position: center center;
}

.navbar__items .navbar__link {
  font-size: 15px;
  font-weight: 500;
  font-family: IBM Plex Mono, Arial, sans-serif;
  padding-bottom: 0;
  line-height: 1rem;
  display: flex;
  align-items: center;
}

.navbar__inner {
  padding: 0;
}

.header-github-link,
.header-slack-link {
  display: none !important;
}

@media all and (min-width: 997px) and (max-width: 1279px) {
  .navbar__inner {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 997px) {

  .header-github-link,
  .header-slack-link {
    display: flex !important;
  }
}

.navbar__items--left {
  flex: 1 0 auto;
}

@media (max-width: 996px) {
  .navbar__items--left {
    display: none;
  }
}

.navbar__logo {
  height: 1.5rem;
}

.sidebar-category-icon-wrapper {
  width: 36px;
  height: 28px;
}

.sidebar-category-icon {
  background-color: var(--meltano-black);
  mask-repeat: no-repeat;
  mask-size: cover;
  mask-position: right;
  margin-right: 0.5rem;
  opacity: 0.75;
  height: 100%;
}

[data-theme='dark'] .sidebar-category-icon {
  background-color: var(--meltano-white);
}

.menu__link--active .sidebar-category-icon {
  background-color: var(--meltano-blue);
  opacity: 1;
}

@media (min-width: 768px) {
  .navbar__logo {
    height: 2rem;
  }
}

.navbar__items--right {
  flex: 0;
}

@media all and (min-width: 768px) {
  .navbar__items--right {
    flex: 1 0 auto;
  }
}

.navbar__toggle {
  display: block;
}

@media all and (min-width: 997px) {
  .navbar__toggle {
    display: none;
  }
}

.navbar__toggle {
  margin-left: 1rem;
  margin-right: 0;
}

.navbar__logo {
  height: 24px;
  width: 102px;
  margin-right: 0;
}

.navbar__logo::before {
  content: '';
  background-image: url("");
  background-size: contain;
  background-repeat: no-repeat;
  height: 24px;
  width: 102px;
  position: absolute;
}

[data-theme='dark'] .navbar__logo::before {
  content: '';
  background-image: url("");
}

@media all and (min-width: 768px) {
  .navbar__logo {
    height: 32px;
    width: 135px;
  }

  .navbar__logo::before {
    height: 32px;
    width: 135px;
  }
}

.footer-soc-wrapper a:hover {
  opacity: 1;
}

.footer__copyright {
  font-size: 14px;
  font-family: 'IBM Plex Mono', Arial, sans-serif;
}

.primaryWrapper .menu__link {
  line-height: 3;
  padding: 0;
}

.primaryWrapper .menu__link:hover,
.primaryWrapper .menu__caret:hover {
  background: none;
}

.navbar-sidebar__brand {
  box-shadow: none;
}

.lost-melty {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  margin-bottom: -4rem;
}

.table-of-contents {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.table-of-contents a {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.toc-book-icon path {
  stroke: var(--ligth-button-text-color)
}

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* termynal */

.termy {
  width: 100%;
  max-width: 100%;
  background: var(--color-bg);
  color: transparent;
  font-size: 0px;
  height: 0;
  font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
  border-radius: 4px;
  padding: 75px 45px 35px;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.termy pre {
  background: var(--color-bg);
  color: transparent;
}

[data-termynal] {
  width: 100% !important;
  max-width: 100%;
  width: 100%;
  height: 100%;
  border: 1px solid var(--ifm-toc-border-color);
  border-radius: 4.6px;
  backdrop-filter: blur(13px);
  background: var(--meltano-tabs-background-color);
  color: var(--markdown-color);
  font-size: var(--ifm-code-font-size);
  font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
  border-radius: 4px;
  padding: 3rem 1rem 1rem;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

[data-termynal]:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 15px;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* A little hack to display the window buttons in one pseudo element. */
  background: #d9515d;
  -webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
  box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
}

[data-termynal]:after {
  content: 'Bash';
  font-family: IBM Plex Mono;
  position: absolute;
  color: var(--markdown-color);
  top: 0px;
  padding-top: 5px;
  height: 36px;
  left: 0;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

[data-ty] {
  display: block;
  line-height: 2;
}

[data-ty]:before {
  /* Set up defaults and ensure empty lines are displayed. */
  content: '';
  display: inline-block;
  vertical-align: middle;
}

[data-ty="input"]:before,
[data-ty-prompt]:before {
  margin-right: 0.75em;
  color: var(--markdown-color);
}

[data-ty="input"]:before {
  content: '$';
}

[data-ty][data-ty-prompt]:before {
  content: attr(data-ty-prompt);
}

[data-ty-cursor]:after {
  content: attr(data-ty-cursor);
  font-family: monospace;
  margin-left: 0.5em;
  -webkit-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

code {
  float: none;
  width: 100%;
}

pre {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  width: 100%;
  position: relative;
}

/* Cursor animation */

@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.tabs-container .margin-top--md {
  margin-top: 0px !important;
}

.meltano-tabs {
  width: auto;
  border-left: 1px solid var(--ifm-toc-border-color);
  background: none;
  padding-left: 0 !important;
}

.meltano-tabs::after {
  content: '';
  width: 100%;
  height: 1px;
  position: relative;
  bottom: -55px;
  border-bottom: 1px solid var(--ifm-toc-border-color);
}

.meltano-tab-content {
  border-bottom: 1px solid var(--ifm-toc-border-color);
  border-right: 1px solid var(--ifm-toc-border-color);
  border-left: 1px solid var(--ifm-toc-border-color);
  background: var(--meltano-tabs-background-color);
  padding: 20px;
}

.meltano-tabs .tabs__item {
  background: none;
  border-radius: 0;
  padding: 1rem 0.5rem;
  justify-content: center;
  font-family: Hanken Grotesk;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 170%;
  border-top: 1px solid var(--ifm-toc-border-color);
  border-right: 1px solid var(--ifm-toc-border-color);
  border-bottom: 1px ;
  width: 100%;
  max-width: 110px;
  min-width: 110px;
}

@media all and (min-width: 640px) {
  .meltano-tabs .tabs__item {
    padding: 1rem 2rem;
    max-width: 175px;
    min-width: 150px;
  }
}

.meltano-tabs .tabs__item--active {
  border-bottom: 1px solid var(--ifm-menu-color-active);
  background: var(--meltano-tabs-background-color);
}

[data-theme='dark'] .meltano-tabs .tabs__item:not(.tabs__item--active) {
  background: none;
}

[data-theme='dark'] .meltano-tabs .tabs__item--active {
  background: var(--meltano-tabs-background-color);
}

.DocSearch-Screen-Icon {
  display: none
}
